<script setup lang="ts">
import { ref, onMounted } from "vue";
import NavBar from "@/components/nav-bar/nav-bar.vue";
import SwiperBanner from "@/components/swiper-banner/swiper-banner.vue";
import CourseNav from "@/components/course-nav/course-nav.vue";
import FreeCard from "@/components/free-card/free-card.vue";

let courses = ref<Array<any>>([]);

let topBanners = ref<Array<any>>([]);
let indexBanner = ref<string>("");
let classList = ref<Array<any>>([]);

onMounted(() => {
  uni.request({
    url: "http://html5.bjsxt.cn/api/index/banner",
    success(res: Response) {
      let result = res.data;
      topBanners.value = result.top_banner;
      indexBanner.value = result.index_banner.img_url;
    },
  });
  uni.request({
    url: "http://html5.bjsxt.cn/api/index/nav",
    success(res: Response) {
      let result = res.data;
      courses.value = result.data.slice(0, 10);
    },
  });
  uni.request({
    url: "http://html5.bjsxt.cn/api/index/specific?userid=2162",
    success(res: Response) {
      classList.value = res.data.data;
    },
  });
});

type Response = Omit<UniNamespace.RequestSuccessCallbackResult, 'data'> & {
  data: any,
}
</script>

<template>
  <view class="home">
    <NavBar />
    <SwiperBanner :banners="topBanners"/>
    <CourseNav :courses="courses"/>
    <view class="online-box">
      <image :src="indexBanner" class="online-img" />
    </view>
    <view>
      <view class="free-box">
        <view class="public-title">
          限时免费
        </view>
        <FreeCard :classList="classList"/>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.home {
  box-sizing: inherit;

  .online-box {
    padding: 10px;

    .online-img {
      width: 100%;
      height: 132rpx;
    }
  }

  .free-box {
    padding: 0 10px;

    .public-title {
      font-size: 1.25rem;
      font-weight: 700;
    }
  }
}
</style>
